import { CSSProperties, ReactElement } from 'react';

export interface HelpCenterPopupProps {
  onClose?: () => void;
}

export default function HelpCenterPopup({ onClose }: HelpCenterPopupProps) {
  // 弹框选项数据
  const menuItems = [
    { id: 1, title: '常见问题' },
    { id: 2, title: '快捷键' },
    { id: 3, title: '提个建议' },
    { id: 4, title: '在线客服' },
  ];

  // 处理选项点击
  const handleMenuItemClick = (id: number) => {
    console.log(`点击了: ${menuItems.find(item => item.id === id)?.title}`);
    // 实际项目中这里可以执行导航操作
  };

  return (
    <div style={styles.container}>
      {/* 背景遮罩层 */}
      <div style={styles.overlay} onClick={onClose} />

      {/* 弹窗主体 */}
      <div style={styles.popup}>
        {/* 顶部标题 */}
        <div style={styles.header}>
          <h2 style={styles.title}>帮助中心</h2>
        </div>

        {/* 选项列表 */}
        <ul style={styles.menu}>
          {menuItems.map((item) => (
            <li 
              key={item.id}
              style={styles.menuItem}
              onClick={() => handleMenuItemClick(item.id)}
            >
              <span style={styles.itemText}>{item.title}</span>
              <ArrowIcon style={styles.arrowIcon} />
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}
// 箭头图标组件
// 定义一个名为ArrowIcon的函数组件，接收一个style参数，用于设置样式
const ArrowIcon = ({ style }: { style?: CSSProperties }): ReactElement => (
  // 返回一个svg元素，设置xmlns、viewBox、width、height属性，以及style属性
  <svg 
    xmlns="http://www.w3.org/2000/svg" 
    viewBox="0 0 24 24" 
    width="16" 
    height="16"
    // 将传入的style参数和默认的样式合并
    style={{ ...styles.arrowIcon, ...style }}
  >
    // 定义svg元素的路径
    <path d="M9.29 15.88L13.17 12 9.29 8.12c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3c-.39.39-1.02.39-1.41 0-.38-.39-.39-1.03 0-1.42z" />
  </svg>
);

// 样式配置
const styles: Record<string, CSSProperties> = {

  popup: {
    position: 'absolute',
    top: '-500px',
      width: '15vw',
    height: '40vh',
    maxWidth: 320,
    backgroundColor: 'white',
    borderRadius: 12,
    overflow: 'hidden',
    boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
    zIndex: 10,
  },
  header: {
    backgroundImage: 'linear-gradient(135deg, #FF8C00, #FFA500)',
    padding: '24px 16px',
    textAlign: 'center',
  },
  title: {
    color: 'white',
    fontSize: '1.3rem',
    fontWeight: 600,
    margin: 0,
  },
  menu: {
    listStyle: 'none',
    padding: 0,
    margin: 0,
  },
  menuItem: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: '16px 20px',
    borderBottom: '1px solid #eee',
    cursor: 'pointer',
    transition: 'background-color 0.2s',
  },
  itemText: {
    color: '#333',
    fontSize: '1rem',
  },
  arrowIcon: {
    fill: '#999',
  },
};